<template>
    <div class="app-menu-list">
        <ul>
            <li v-for="menuGroup in menus" :key="menuGroup.name">
                <div class="app-menu-group-name">
                    <span>{{menuGroup.name}}</span>
                </div>
                <ul>
                    <li v-for="menu in menuGroup.children" :key="menu.title" @click="handleClickMenu(menu)" :class="{'app-menu-active':currentPath === menu.page}">
                        <div class="app-menu-name">
                            <span>{{menu.name}}</span>
                            <span>{{menu.title}}</span>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
    import {AppMenu, MENUS} from "./menus";
    import {AppNavigator} from "../navigator/app-navigator";

    export default {
        name: "app-menu",
        props: {
            currentPath: String,
        },
        setup() {
            const navigator = AppNavigator.use.inject()

            return {
                menus: MENUS,
                handleClickMenu: (menu: AppMenu) => {
                    navigator.methods.go(menu.page)
                }
            }
        },
    }
</script>

<style lang="scss">
    .app-menu-list {
        height: 100%;
        overflow: auto;

        ul {
            list-style: none;
            margin: 0;
            padding: 0;

            .app-menu-name, .app-menu-group-name {
                font-size: 14px;
                padding: 10px 24px 12px 32px;
                white-space: nowrap;
                color: #333;
                cursor: pointer;
                transition: all 300ms linear;

                &:hover {
                    background-color: rgba(#42b983, 0.1);
                    color: #42b983;
                }
            }

            .app-menu-name {
                position: relative;

                & > span {
                    &:nth-child(2) {
                        font-size: 12px;
                        margin-left: 0.5em;
                        color: #ccc;
                    }
                }

                .pl-icon {
                    position: absolute;
                    right: 16px;
                    line-height: 40px;
                }
            }

            .app-menu-group-name {
                padding-left: 24px;
                letter-spacing: 1px;
                font-size: 12px;
                font-weight: 600;
                color: #42b983;
            }
        }

        &:after {
            position: absolute;
            top: 0;
            bottom: 0;
            right: -30px;
            width: 30px;
            content: '';
            box-shadow: inset 10px 0 8px -8px #f0f1f2;
        }
    }
</style>